<script setup lang="ts">
import { bannaList, bannerRemove } from "@/api/banner";
import { useTheme } from "@/composables/useTheme";
import { JumpPath, Tips } from "@/utils";
import footerBtn from "@/components/footerBtn/index.vue";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import hideWechatMenu from "@/composables/hideWechatMenu";
onReady(() => {
  hidePageNavInWechatBrowser();
});
const { colorStyle } = useTheme();

onShow(() => {
  hideWechatMenu();
  getList();
});
let list = ref([]);
function getList() {
  uni.showLoading();
  const params = {
    page: 1,
    limit: 30,
  };
  bannaList(params).then((res) => {
    uni.hideLoading();
    list.value = res.data.list;
    console.log(res);
  });
}
let delId = ref(null);
function delHandler(id) {
  delId.value = id;
  uni.showModal({
    title: "提示",
    content: "确定要删除吗？",
    success: function (res) {
      if (res.confirm) {
        delBannerHanler();
      }
    },
  });
}
function delBannerHanler() {
  bannerRemove({ id: delId.value }).then((res) => {
    Tips({
      title: res.info,
      success: () => {
        getList();
      },
    });
  });
}
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view class="list_box" v-if="list.length">
      <view
        class="list_item flex_ss"
        v-for="(item, index) in list"
        :key="index"
        @click="JumpPath('/pages/basicSet/showSetSon/swiper?id=' + item.id)"
      >
        <view class="img_box">
          <view class="del_class" @click.stop="delHandler(item.id)">
            <text class="iconfont icon-guanbi1"></text>
          </view>
          <view class="image_box">
            <image :src="item.images" mode="scaleToFill" />
          </view>
        </view>
        <view class="info_box">
          <view class="text1">跳转链接</view>
          <view class="text2 line1" v-if="item.curl_http">{{
            item.curl_http
          }}</view>
          <view class="text2" v-else>请输入跳转链接</view>
        </view>
      </view>
    </view>
    <view class="empty_box" v-else>
      <up-empty icon="/static/image/empty.png"> </up-empty>
    </view>
    <view class="uni-p-b-98"></view>
    <footerBtn
      title="添加轮播图"
      @submitHandler="JumpPath('/pages/basicSet/showSetSon/swiper')"
    />
  </view>
</template>

<style scoped lang="scss">
.wrap {
  .list_box {
    .list_item {
      background: #fff;
      padding: 18rpx 30rpx;
      margin-bottom: 30rpx;

      .img_box {
        position: relative;
        width: 270rpx;
        height: 130rpx;
        margin-right: 30rpx;
        flex-shrink: 0;
        .del_class {
          position: absolute;
          z-index: 10;
          left: -10rpx;
          top: -10rpx;
          .iconfont {
            font-size: 30rpx;
          }
        }
        .image_box {
          border-radius: 16rpx;
          overflow: hidden;
          width: 100%;
          height: 100%;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .info_box {
        width: 60%;
        font-size: 30rpx;
        .text1 {
          color: #3c4143;
          margin-bottom: 20rpx;
        }
        .text1 {
          color: #272636;
        }
      }
    }
  }
}
</style>
